<template >
  <div >
    <div id="login" style="background-color: #4A374A;">
      <h1>Login</h1>
        <input type="text"  placeholder="用户名" v-model="username"/>
        <input type="password"  placeholder="密码" v-model="password"/>
        <input type="password"  placeholder="确认密码" v-model="password1"/>
        <button class="but" type="button" @click="regist">注册</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      msg: '你好啊世界',
      username: '',
      password: '',
      password1: ''
    }
  },
  methods: {
    // login () {
    //   // this.$axios.get('/api/login?username=' +
    //   //   this.username + '&password=' + this.password).then(result => {
    //   //   console.log(result.data)
    //   // })
    //
    //   // 规范的
    //   this.$axios.get('/api/login', {
    //     params: {
    //       username: this.username,
    //       password: this.password
    //     }
    //   })
    //     .then(result => {
    //       console.log(result.data)
    //     })
    // }
    regist () {
      if (this.password !== this.password1) {
        alert('两次代码不一致')
        return false
      }
      this.$axios.post('/api/user/regist', {username: this.username, password: this.password}).then(result => {
        if (result.data.data) {
          alert('操作成功，请登录')
          this.$router.push(
            {
              path: '/login'
            }

          )
        } else {
          alert(result.data.message)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style src="@/assets/css/index.css" scoped></style>
<style scoped>
</style>
